<!--  -->
<template>
    <pageTabelLayout>
        <template #pageHeader>
    <a-form :model="form" layout="inline" size="mini">
        <a-form-item label="单据号">
            <a-input allow-clear class="bacClass" v-model="form.material_request_no" :style="{ width: '150px' }" />
        </a-form-item>
        <a-form-item label="商品">
            <a-input allow-clear class="bacClass" v-model="form.material_code" :style="{ width: '150px' }" />
        </a-form-item>
        <a-form-item label="建单日期">
            <a-range-picker  popup-container="html"  class="bacClass" @clear="onClear" v-model="form.JDRQ" allow-clear />
        </a-form-item>
    </a-form>
    <!-- '开需求单', -->
    <div class="cssToolbar">
        <Toolbar :items="[
            `查询`, '导出']" @select="cx" @export="exports">
        </Toolbar>
    </div>
    </template>
    <template #pageTabel>
        <a-spin :loading="form.pageLoading" tip="加载中" dot style="height:100%;width: 100%;z-index:999 ;">
            <AgGridVuesCopys :rowHeight="33" :headerHeight="33" :suppressCopyRowsToClipboard="true" :suppressDragLeaveHidesColumns="true" rowSelection="multiple"
                @grid-ready="gridReady" @columnResized="onColumnResized" @columnMoved="onColumnMoved"
                @columnVisible="onColumnVisible" style="height: calc(100% - 45px);" :defaultColDef="defaultColDef" class='ag-theme-alpine' :rowData="dataList" :columnDefs="CwColumns"
                :localeText="localeText1"></AgGridVuesCopys>
            <paginationCopys :page-size-options="pagingList1" :total="total" show-total show-jumper show-page-size
                @change="PageSize" @page-size-change="change1" style="justify-content: center" :page-size="size"
                :current="page" />
        </a-spin>
    </template>
</pageTabelLayout>
</template>

<script lang='ts' setup>
import { reactive, ref, onMounted } from 'vue'
import Toolbar from '@/components/Toolbar.vue'
import { post } from '@/api/http'
import { Message, Modal } from '@arco-design/web-vue'

import { localeText } from '@/api/aggridZw'
import { pagingList } from '@/api/paging'
import filedownload from 'js-file-download'
import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
const localeText1: any = ref(localeText)
const pagingList1: any = ref(pagingList)
const defaultColDef: any = {
    sortable: true,
    resizable: true,
    filter: true,
}
const gridOption = ref()
const colState = ref()
const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
}

const total = ref(0);
const page = ref(1);
const size = ref(10);
function PageSize(val: any) {
    page.value = val
    doRefresh();
}
function change1(val: any) {
    size.value = val
    doRefresh();
}


const dataList: any = ref([])



const form: any = reactive({
    pageLoading: false,
    material_request_no: '',
    material_code: '',
    JDRQ: ['', '']
})

const onClear = () => {
    form.JDRQ = ['', '']
}

function doRefresh() {
    form.pageLoading = true
    updateGridState01()
    post({
        url: "/finance/FinanceReport/getIronwareOutStock",
        data: {
            page: page.value,
            size: size.value,
            material_request_no: form.material_request_no,
            material_code: form.material_code,
            beginDate: form.JDRQ[0],
            endDate: form.JDRQ[1]
        },
    })
        .then(({ data, code, message }: any) => {
            if (code === 200) {
                let HH = 1
                dataList.value = data.list.map((res) => {
                    res['DJLX'] = 21
                    res['YWLX'] = 19
                    res['MB'] = '领用出库jc'
                    res['BM'] = 2
                    res['HL'] = 1
                    res['BZ'] = 'RMB'
                    res['TJ'] = 2
                    res['MR0'] = 0
                    res['HH'] = HH++
                    res['HW'] = 2
                    res['KL'] = 100
                    res['CRLB'] = 42
                    return res
                })
                gridOption.value.setRowData(data.list)
                total.value = data.total
            } else {
                Message.error(message)
            }
        })
        .catch(console.log).finally(() => {
            form.pageLoading = false
        })
}


const cx = () => {
    page.value = 1
    doRefresh()
}

const CwColumns = [
    {
        headerName: '单据类型',
        field: 'DJLX',//21
        width: 150
    },
    {
        headerName: '业务类型',
        field: 'YWLX',//19
        width: 150
    },
    {
        headerName: '会计年度',
        field: 'recordYear',
        width: 150
    },
    {
        headerName: '会计期间',
        field: 'recordMonth',
        width: 150
    },
    {
        headerName: '单据号',
        field: 'material_request_no',
        width: 150
    },
    {
        headerName: '往来单位',
        field: 'WLDW',//
        width: 150
    },
    {
        headerName: '模版',
        field: 'MB',//领用出库jc
        width: 150
    },
    {
        headerName: '制单日期',
        field: 'create_time',
        width: 150
    },
    {
        headerName: '制单人',
        field: 'create_name',
        width: 150
    },
    {
        headerName: '职员',
        field: 'CD',//
        width: 150
    },
    {
        headerName: '部门',
        field: 'BM',//2
        width: 150
    },
    {
        headerName: '科目',
        field: 'SPHH',//
        width: 150
    },
    {
        headerName: '汇率',
        field: 'HL',//1
        width: 150
    },
    {
        headerName: '币种',
        field: 'BZ',//RMB
        width: 150
    },
    {
        headerName: '项目',
        field: 'TQSJ',//
        width: 150
    },
    {
        headerName: '统计',
        field: 'TJ',//2
        width: 150
    },
    {
        headerName: '到期日期',
        field: 'BHSCGJ',//
        width: 150
    },
    {
        headerName: '开票日期',
        field: 'HSXSJ',//
        width: 150
    },
    {
        headerName: '付款条件',
        field: 'BHSXSJ',//
        width: 150
    },
    {
        headerName: '发票号',
        field: 'BHSJHJ',//
        width: 150
    },
    {
        headerName: '发票类型',
        field: 'MR0',//0
        width: 150
    },
    {
        headerName: '开票标志',
        field: 'MR0',//0
        width: 150
    },

    {
        headerName: '单位地址',
        field: 'PCGLBZ',//
        width: 150
    },
    {
        headerName: '单位开户行',
        field: 'ZJSPBZ',//
        width: 150
    },
    {
        headerName: '企业地址',
        field: 'ZZBZ',//
        width: 150
    },
    {
        headerName: '企业开户行',
        field: 'STSPBZ',//
        width: 150
    },
    {
        headerName: '备注',
        field: 'BZ',//
        width: 150
    },
    {
        headerName: '冲销来源单据',
        field: 'ZDYXM0',//
        width: 150,
    },
    {
        headerName: '行号',
        field: 'HH',//顺延
        width: 150,
    },
    {
        headerName: '商品',
        field: 'material_code',
        width: 150,
    },
    {
        headerName: '选择单据',
        field: 'ZDYXM3',//
        width: 150,
    },
    {
        headerName: '货位',
        field: 'HW',//2
        width: 150,
    },
    {
        headerName: '计量单位',
        field: 'unit',
        width: 150,
    },
    {
        headerName: '数量',
        field: 'total_num',
        width: 150,
    },
    {
        headerName: '原币单价',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '约定日期',
        field: 'BHSXSJZBDKJE',//
        width: 150,
    },
    {
        headerName: '扣率',
        field: 'KL',//100
        width: 150,
    },
    {
        headerName: '原币金额',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '本币金额',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '税率',
        field: 'PZWH',//
        width: 150,
    },
    {
        headerName: '原币税额',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '本币税额',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '生产批号',
        field: 'BZGG',//
        width: 150,
    },
    {
        headerName: '生产日期',
        field: 'TJDW',//
        width: 150,
    },
    {
        headerName: '到期日期',
        field: 'ZLDW',//
        width: 150,
    },
    {
        headerName: '保质期',
        field: 'PCXSJJL',//
        width: 150,
    },
    {
        headerName: '工程',
        field: 'SPM',//
        width: 150,
    },
    {
        headerName: '自定义项目0',
        field: 'ZGCGJ',//
        width: 150,
    },
    {
        headerName: '自定义项目1',
        field: 'ZDCGJ',//
        width: 150,
    },
    {
        headerName: '自定义项目2',
        field: 'ABCDJ',//
        width: 150,
    },
    {
        headerName: '自定义项目3',
        field: 'WSXSBZ',//
        width: 150,
    },
    {
        headerName: '自定义项目4',
        field: 'WSXSBZ',//
        width: 150,
    },
    {
        headerName: '自定义项目5',
        field: 'WSXSBZ',//
        width: 150,
    },
    {
        headerName: '批次商品明细',
        field: 'WSXSBZ',//
        width: 150,
    },
    {
        headerName: '成本差异',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '成本金额',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '关闭标志',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '待打印标志',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '待实现销项税',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '平均成本金额',
        field: 'MR0',//0
        width: 150,
    },
    {
        headerName: '凭证',
        field: 'WSXSBZ',//
        width: 150,
    },
    {
        headerName: '凭证1',
        field: 'WSXSBZ',//
        width: 150,
    },
    {
        headerName: '出入类别',
        field: 'CRLB',//42
        width: 150,
    },
    {
        headerName: '审核人',
        field: 'WSXSBZ',//
        width: 150,
    },
    {
        headerName: '合同号',
        field: 'WSXSBZ',//
        width: 150,
    },
    {
        headerName: '赠品标志',
        field: 'MR0',//0
        width: 150,
    },
]

const pageData = reactive({
    rHeight: 0
})

onMounted(() => {
    pageData.rHeight = document.getElementsByClassName("main-section")[0]?.clientHeight
    //弹出层的高
    if (pageData.rHeight !== undefined) {
        pageData.rHeight = pageData.rHeight;
    }
    doRefresh();
})

const exports = () => {
    post({
        url: '/finance/FinanceExport/exportPurchaseMaterialInfo',
        data: {
            material_request_no: form.material_request_no,
            material_code: form.material_code,
            beginDate: form.JDRQ[0],
            endDate: form.JDRQ[1]
        },
        responseType: 'blob',
    }).then((res: any) => {
        filedownload(res, '出库.dat')
    })
}
const { saveGridState: saveGridState01, updateGridState: updateGridState01 } = saveOrUpdateGridState01('JingShuanPanBbCk-1', gridOption, colState, CwColumns)
const onColumnMoved = () => {
    saveGridState01()
}
const onColumnResized = () => {
    saveGridState01()
}
const onColumnVisible = () => {
    saveGridState01()
}
</script>
<style lang='less' scoped>
.cssToolbar {
    text-align: right;
    margin-bottom: 2px;
}

:deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
}

:deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
}

:deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>